<!doctype html>
<html lang="en-US" dir="ltr">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>猫眼电影数据分析系统</title>
{#    <link rel="apple-touch-icon" sizes="180x180" href="/static/static/img/favicons/apple-touch-icon.png">#}
{#    <link rel="icon" type="image/png" sizes="32x32" href="/static/static/img/favicons/favicon-32x32.png">#}
    <link rel="icon" type="image/png" sizes="16x16" href="/static/static/picture/bitbucket.png">
{#    <link rel="shortcut icon" type="image/x-icon" href="/static/static/img/favicons/favicon.ico">#}
    <link rel="manifest" href="/static/static/img/favicons/manifest.json">
    <meta name="msapplication-TileImage" content="/static/static/img/favicons/mstile-150x150.png">
    <meta name="theme-color" content="#ffffff">
    <link rel="preconnect" href="https://fonts.gstatic.com/">
    <link href="/static/static/css/css2.css" rel="stylesheet">
    <link href="/static/static/css/css21.css" rel="stylesheet">
    <link href="/static/static/css/phoenix.min.css" rel="stylesheet" id="style-default">
    <link href="#" rel="stylesheet" id="user-style-default">
    <style>
      body {
        opacity: 0;
      }
    </style>
  </head>

  <body>
    <main class="main" id="top">
      <div class="container-fluid px-0">
        <nav class="navbar navbar-light navbar-vertical navbar-vibrant navbar-expand-lg">
          <div class="collapse navbar-collapse" id="navbarVerticalCollapse">
            <div class="navbar-vertical-content scrollbar">
              <ul class="navbar-nav flex-column" id="navbarVerticalNav">
{#                <li class="nav-item"><a class="nav-link active" href="">#}
{#                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="cast"></span></span><span class="nav-link-text">类型分析</span></div>#}
{#                  </a></li>#}
                <li class="nav-item">
                  <p class="navbar-vertical-label">数据分析可视化</p>
                    <a class="nav-link " href="/myApp/chartOne/">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="layers"></span></span><span class="nav-link-text">类型分析</span></div>
                  </a>
                    <a class="nav-link " href="/myApp/rateChart/">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="cast"></span></span><span class="nav-link-text">评分分析</span></div>
                  </a>
                    <a class="nav-link " href="/myApp/timeChart/">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="watch"></span></span><span class="nav-link-text">时间分析</span></div>
                  </a>
                    <a class="nav-link " href="/myApp/boxChart/">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="life-buoy"></span></span><span class="nav-link-text">票房分析</span></div>
                  </a>




                </li>

                     <li class="nav-item">
                  <p class="navbar-vertical-label">数据总览</p>
                    <a class="nav-link " href="/myApp/tableData/">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="columns"></span></span><span class="nav-link-text">电影数据浏览</span></div>
                  </a>

                   <li class="nav-item">
                  <p class="navbar-vertical-label">个人信息</p>
                    <a class="nav-link " href="/myApp/changeInfo/">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="user"></span></span><span class="nav-link-text">个人信息修改</span></div>
                  </a>
                    <a class="nav-link " href="/myApp/collectData/">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="heart"></span></span><span class="nav-link-text">个人收藏</span></div>
                  </a>


                </li>

                   <li class="nav-item">
                  <p class="navbar-vertical-label">预测</p>
                    <a class="nav-link " href="/myApp/predict/">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="flag"></span></span><span class="nav-link-text">票房预测</span></div>
                  </a>


                </li>
                   <li class="nav-item">
                  <p class="navbar-vertical-label">推荐</p>
                    <a class="nav-link " href="/myApp/recommendation/">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="star"></span></span><span class="nav-link-text">电影推荐</span></div>
                  </a>


                </li>

   <li class="nav-item">
<p class="navbar-vertical-label">数据词云图</p>
                 <a class="nav-link dropdown-indicator active" href="#errors" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="errors">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="alert-cloud"></span></span><span class="nav-link-text">词云图</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="errors">
                    <li class="nav-item"><a class="nav-link" href="/myApp/movieCloud/" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">电影词云图</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link active" href="/myApp/actorCloud/" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">演员词云图</span></div>
                      </a></li>
                  </ul>

                </li>
              </ul>
            </div>
{#            <div class="navbar-vertical-footer"><a class="btn btn-link border-0 fw-semi-bold d-flex ps-0" href="#!"><span class="navbar-vertical-footer-icon" data-feather="log-out"></span><span>Settings</span></a></div>#}
          </div>
        </nav>
        <nav class="navbar navbar-light navbar-top navbar-expand">
          <div class="navbar-logo"><button class="btn navbar-toggler navbar-toggler-humburger-icon" type="button" data-bs-toggle="collapse" data-bs-target="#navbarVerticalCollapse" aria-controls="navbarVerticalCollapse" aria-expanded="false" aria-label="Toggle Navigation"><span class="navbar-toggle-icon"><span class="toggle-line"></span></span></button> <a class="navbar-brand me-1 me-sm-3" href="">
              <div class="d-flex align-items-center">
                <div class="d-flex align-items-center"><img src="/static/static/picture/bitbucket.png" alt="phoenix" width="32">
                  <p class="logo-text ms-2 d-none d-sm-block" style="font-size: 17px">猫眼电影数据分析系统</p>
                </div>
              </div>
            </a></div>
          <div class="collapse navbar-collapse">
            <div class="search-box d-none d-lg-block">
{#              <form class="position-relative" data-bs-toggle="search" data-bs-display="static"><input class="form-control form-control-sm search-input search min-h-auto" type="search" placeholder="Search..." aria-label="Search"> <span class="fas fa-search search-box-icon"></span></form>#}
            </div>
            <ul class="navbar-nav navbar-nav-icons ms-auto flex-row">
{#              <li class="nav-item dropdown"><a class="nav-link" id="navbarDropdownNotification" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="text-700" data-feather="bell" style="height:20px;width:20px;"></span></a></li>#}
{#              <li class="nav-item dropdown"><a class="nav-link notification-indicator notification-indicator-primary" id="navbarDropdownSettings" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="text-700" data-feather="settings" style="height:20px;width:20px;"></span></a></li>#}
{#              <li class="nav-item dropdown"><a class="nav-link" id="navbarDropdownNindeDots" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">#}
{#                    <circle cx="2" cy="2" r="2" fill="#6C6E71"></circle>#}
{#                    <circle cx="2" cy="8" r="2" fill="#6C6E71"></circle>#}
{#                    <circle cx="2" cy="14" r="2" fill="#6C6E71"></circle>#}
{#                    <circle cx="8" cy="8" r="2" fill="#6C6E71"></circle>#}
{#                    <circle cx="8" cy="14" r="2" fill="#6C6E71"></circle>#}
{#                    <circle cx="14" cy="8" r="2" fill="#6C6E71"></circle>#}
{#                    <circle cx="14" cy="14" r="2" fill="#6C6E71"></circle>#}
{#                    <circle cx="8" cy="2" r="2" fill="#6C6E71"></circle>#}
{#                    <circle cx="14" cy="2" r="2" fill="#6C6E71"></circle>#}
{#                  </svg></a>#}
                <div class="dropdown-menu dropdown-menu-end py-0 dropdown-nide-dots shadow border border-300" aria-labelledby="navbarDropdownNindeDots">
                  <div class="card bg-white position-relative border-0">
                    <div class="card-body pt-3 px-3 pb-0 overflow-auto scrollbar" style="height: 20rem;">
                      <div class="row text-center align-items-center gx-0 gy-0">
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/behance.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Behance</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/google-cloud.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Cloud</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/slack.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Slack</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/github.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Github</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/bitbucket.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">BitBucket</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/google-drive.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Drive</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/trello.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Trello</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/figma.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Figma</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/twitter.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Twitter</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/pinterest.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Pinterest</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/linkedin.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Linkedin</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/google-maps.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Maps</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/google-photos.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Photos</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="/static/static/picture/spotify.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Spotify</p>
                          </a></div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown"><a class="nav-link lh-1 px-0 ms-5" id="navbarDropdownUser" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <div class="avatar avatar-l"><img class="rounded-circle" src="/static/static/picture/57.png" alt=""></div>
                </a>
                <div class="dropdown-menu dropdown-menu-end py-0 dropdown-profile shadow border border-300" aria-labelledby="navbarDropdownUser">
                  <div class="card bg-white position-relative border-0">
                    <div class="card-body p-0 overflow-auto scrollbar" style="height: 18rem;">
                      <div class="text-center pt-4 pb-3">
                        <div class="avatar avatar-xl"><img class="rounded-circle" src="/static/static/picture/57.png" alt=""></div>
                        <h6 class="mt-2">{{ userInfo.username }}</h6>
                      </div>
{#                      <div class="mb-3 mx-3"><input class="form-control form-control-sm" id="exampleFormControlInput1" placeholder="Update your status"></div>#}
                        <ul class="nav d-flex flex-column mb-2 pb-1">
                            <li class="nav-item"><a class="nav-link px-3" href="/myApp/index/"><span
                                    class="me-2 text-900" data-feather="cast"></span>查看大屏</a></li>
{#                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="settings"></span>Settings &amp; Privacy</a></li>#}
{#                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="help-circle"></span>Help Center</a></li>#}
{#                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="globe"></span>Language</a></li>#}
                      </ul>
                    </div>
                    <div class="card-footer p-0 border-top">
{#                      <ul class="nav d-flex flex-column my-3">#}
{#                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="user-plus"></span>Add another account</a></li>#}
{#                      </ul>#}
{#                      <hr>#}
                      <div class="px-3"><a class="btn btn-phoenix-secondary d-flex flex-center w-100" href="/myApp/logOut/"><span class="me-2" data-feather="log-out"></span>退出登录</a></div>
{#                      <div class="my-2 text-center fw-bold fs--2 text-600"><a class="text-600 me-1" href="#!">Privacy policy</a>&bull;<a class="text-600 mx-1" href="#!">Terms</a>&bull;<a class="text-600 ms-1" href="#!">Cookies</a></div>#}
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </nav>
        <div class="content pt-5">
          <div class="pb-5">
            <div class="row g-5">
              <div class="col-12 col-xxl-6">
                <div class="mb-8">
                  <h2 class="mb-2">演员词云图</h2>
{#                  <h5 class="text-700 fw-semi-bold">Here’s what’s going on at your business right now</h5>#}
                </div>

                <hr class="bg-200 mb-6 mt-4">

{#                  class="echart-total-sales-chart" #}

              </div>
              <div class="col-12 col-xxl-12">
                <div class="row g-3">
                  <div class="col-12 col-md-12">
                    <div class="card border border-200 shadow-none h-100">
                      <div class="card-body">
                        <div class="d-flex justify-content-between">
                          <div>
                            <h5 class="mb-1">词云图
{#                                <span class="badge badge-light-warning rounded-pill fs--1 ms-2">-6.8%</span#}
                                </h5>
{#                            <h6 class="text-700">图表2</h6>#}
                          </div>
{#                          <h4>16,247</h4>#}
                        </div>
                        <div id="mainB" style="height: 390px;width: 100%;text-align: center">
{#                          <div class="echart-total-orders" style="height:85px;width:115px" data-echarts='{"tooltip":{"show":false},"series":[{"type":"bar","barWidth":"5px","data":[120,200,150,80,70,110,120],"showBackground":true,"symbol":"none","itemStyle":{"borderRadius":10},"backgroundStyle":{"borderRadius":10}}],"grid":{"right":10,"left":10,"bottom":0,"top":0}}'></div>#}
                            <img src="/static/static/actorCloud.png" alt="" style="height: 390px">
                        </div>

                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>



        </div>
      </div>
    </main>
    <script src="/static/static/js/phoenix.js"></script>
    <script src="/static/static/js/ecommerce-dashboard.js"></script>
{#  	<div style="display:none;"><a href="#">网站模板</a></div>#}
  <script src="/static/static/echarts.js"></script>

        <script>
            var chartDom = document.getElementById('mainC');
var myChart = echarts.init(chartDom);
var option;

 option = {
      "dataZoom":[
        {
            type:'slider',
            start:0,
            end:15
        }
    ],
    "backgroundColor":"#fff",
    "tooltip":{
        "trigger":"axis",
        "formatter":"{b}<br />  {c}万"
    },
    "grid":{
        "show":true,
        "borderColor":"#fff",
        "borderWidth":4,
        "top":"10%",
        "bottom":"10%",
        "left":"10%",
        "right":"10%"
    },
    "legend": {
        "data":["票房"],
        "right":"10%",
        "top":"5%",
        "textStyle":{
            "color":"#2d5094",
            "fontSize":16,
        }
    },
    "xAxis": {
        "data": {{ mYearX | safe }},       //横坐标
        "axisLine":{
            "show":false
        },
        "axisTick":{
            "show":false
        },
        "axisLabel":{
            "show":true,
            "interval":0,
            "rotate":45,
            "color":"#2d5094",
            "fontFamily":"Microsoft YaHei",
            "fontSize":12
        },
        "splitLine":{
            "show":true,
            "lineStyle":{
                "color":"#fff",
                "width":4
            }
        },
        "splitArea":{
            "show":true,
            "areaStyle":{
                "color":["rgba(190,224,255,0.5)"]
            }
        }
    },
    "yAxis": {
        {#"max":100,#}
        "axisLine":{
            "show":false
        },
        "axisTick":{
            "show":true,
            "length":15,
            "lineStyle":{
                "color":"#2d5094"
            }

        },
        "axisLabel":{
            "show":true,
            "color":"#2d5094",
            "fontFamily":"Microsoft YaHei",
            "margin":18,
            "fontSize":12
        },
        "splitLine":{
            "show":false
        },
        "splitArea":{
            "show":false
        }
    },
    "series": [{
        "name": '票房',
        "data": {{ mYearY }},        //数据
        "type": 'bar',
        "barWidth":"96%",
    	itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#1690e3'},
                        {offset: 0.5, color: '#1666c5'},
                        {offset: 1, color: '#2d5094'}
                    ]
                )
            },
            emphasis: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#2d5094'},
                        {offset: 0.5, color: '#1666c5'},
                        {offset: 1, color: '#1690e3'},
                    ]
                )
            }
        },
        "label":{
            "show":true,
            "position":"top",
            "formatter":["{f1|{c}}","{f2|万}"].join(' '),
            "rich":{
                "f1":{
                    "color":"#2d5094",
                    "fontSize":16,
                    "fontFamily":"Microsoft YaHei"
                },
                "f2":{
                    "color":"#2d5094",
                    "fontSize":10,
                    "fontFamily":"Microsoft YaHei",
                    "verticalAlign":"bottom"
                }
            }
        }

    }]
};


option && myChart.setOption(option);
    </script>
    <script>
            var chartDom = document.getElementById('mainB');
var myChart = echarts.init(chartDom);
var option;
 option = {
       grid: {
        left: 60,
        right: 50,
        top: 60,
        bottom: 30,
    },
      dataZoom:[
        {
            type:'inside',
            start:0,
            end:30
        }
    ],
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: {{ mTypeBoxX | safe }}
    },
      tooltip: {
    trigger: 'axis'
  },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            formatter: '{value} 万'
        }
    },
    series: [{
          markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
        data: {{ mTypeBoxY }},
        type: 'line',
        // showSymbol: false,
        // smooth: true,
        symbol:'diamond',
        symbolSize:15,
        itemStyle: {
            normal: {
                color: "#1c7bf0"
            },
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#1c7bf0'
                }, {
                    offset: 1,
                    color: '#fff'
                }])
            }
        },
    }]
}

option && myChart.setOption(option);
    </script>
<script>
    var chartDom = document.getElementById('mainD');
var myChart = echarts.init(chartDom);
var option;

option = {
  color: [ '#00DDFF',],
  title: {
    {#text: 'Gradient Stacked Area Chart'#}
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: [ '票房', ]
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: {{ mCountryBoxX | safe }}
    }
  ],
  yAxis: [
    {
        name:'单位(万)',
      type: 'value'
    }
  ],
  series: [

    {
      name: '票房',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: {{ mCountryBoxY }}
    },



  ]
};
option && myChart.setOption(option);
</script>
</body>
  <script>
      function typeChange(e) {
          location.href = 'http://127.0.0.1:8000/myApp/chartOne?typeName=' + e.target.value
      }
  </script>
</html>